<template>
	<view class="page-all">
		<Header title="上传检查记录单" bgColor="#fff" :leftIconsize="0"></Header>
		<view class="list-container">
			<!-- 食堂信息 -->
			<view class="item">
				<view class="top-label" @click="retract(0)">
					<view>食堂信息</view>
					<view v-if="showBasicInformation[0].show"><uv-icon name="arrow-down" size="35rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="35rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[0].show">
					<view class="row">
						<view class="title">食堂名称:</view>
						<view class="con">{{ form.schoolName }}</view>
					</view>
					<view class="row">
						<view class="title">供应餐次:</view>
						<view class="con">{{ form.headmasterName }}</view>
					</view>
					<view class="row">
						<view class="title">学校地区类型:</view>
						<view class="con">{{ form.schoolNature }}</view>
					</view>
					<view class="row">
						<view class="title">食安管理人员:</view>
						<view class="con">{{ form.feedingMode }}</view>
					</view>
					<view class="row">
						<view class="title" style="width: 300rpx">联系方式:</view>
						<view class="con">{{ form.cafeteriaName }}</view>
					</view>
					<view class="row">
						<view class="title" style="width: 300rpx">餐饮风险量化等级:</view>
						<view class="con">{{ form.canteenPerson }}</view>
					</view>
					<view class="row">
						<view class="title">AI智能后厨:</view>
						<view class="con">{{ form.feedingMode }}</view>
					</view>
					<view class="row">
						<view class="title">经营模式:</view>
						<view class="con">{{ form.feedingMode }}</view>
					</view>
					<view class="row">
						<view class="title">经营场所平面图:</view>
						<view class="con">{{ form.feedingMode }}</view>
					</view>
					<view class="row">
						<view class="title">从业人员数量:</view>
						<view class="con">{{ form.feedingMode }}</view>
					</view>
					<view class="row">
						<view class="title">食品经营许可证编号:</view>
						<view class="con">{{ form.feedingMode }}</view>
					</view>
          <view class="row">
            <view class="title">食品经营许可证:</view>
            <view class="con">{{ form.feedingMode }}</view>
          </view>
					<view class="row">
						<view class="title">中国居民身份证:</view>
						<view class="con">{{ form.feedingMode }}</view>
					</view>

				</view>
			</view>
			<!-- 从业人员 -->
			<view class="item">
				<view class="top-label" @click="retract(1)">
					<view>从业人员</view>
					<view v-if="showBasicInformation[1].show"><uv-icon name="arrow-down" size="35rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="35rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[1].show">
					<view class="table-head">
						<view>序号</view>
						<view>姓名</view>
						<view>性别</view>
						<view>发证日期</view>
						<view>健康证明</view>
					</view>
					<view v-for="(item, index) in list" :key="index" class="table-bottom" v-if="list && list.length > 0">
						<view>{{ index + 1 }}</view>
						<view>{{ item.name }}</view>
						<view>{{ item.sex }}</view>
						<view>{{ item.date }}</view>
						<view class="tabel-img"><image :src="item.img"></image></view>
					</view>
					<view v-else class="tabel-no-data">
						<image src="@/static/image/noData.png" class="no-data"></image>
						<view>暂无数据</view>
					</view>
				</view>
			</view>
			<!-- 库存食材 -->
			<view class="item">
				<view class="top-label" @click="retract(2)">
					<view>库存食材</view>
					<view v-if="showBasicInformation[2].show"><uv-icon name="arrow-down" size="35rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="35rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[2].show">
					<view class="table-head">
						<view>序号</view>
						<view>商品名称</view>
						<view>库存</view>
						<view>单位</view>
						<view>入库日期</view>
					</view>

					<view v-for="(item, index) in list" :key="index" class="table-bottom" v-if="list && list.length > 0">
						<view>{{ index + 1 }}</view>
						<view>{{ item.name }}</view>
						<view>{{ item.sex }}</view>
						<view>{{ item.date }}</view>
						<view>{{ item.date }}</view>
					</view>

					<view v-else class="tabel-no-data">
						<image src="@/static/image/noData.png" class="no-data"></image>
						<view>暂无数据</view>
					</view>
				</view>
			</view>
			<!-- 检查信息 -->
			<view class="item">
				<view class="top-label" @click="retract(3)">
					<view>检查信息</view>
					<view v-if="showBasicInformation[3].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[3].show">
					<view class="row">
						<view class="title">检查食堂:</view>
						<view class="con">{{ '检查食堂' }}</view>
					</view>
					<view class="row">
						<view class="title">指标名称:</view>
						<view class="con">{{ '指标名称' }}</view>
					</view>
					<view class="row">
						<view class="title">检查日期:</view>
						<view class="con">{{ '检查日期' }}</view>
					</view>
					<view class="row">
						<view class="title">检查人:</view>
						<view class="con">{{ '检查人' }}</view>
					</view>
				</view>
			</view>
			<!-- 检查内容 -->
			<view class="item">
				<view class="top-label" @click="retract(4)">
					<view>检查内容</view>
					<view v-if="showBasicInformation[4].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[4].show">
					<view v-for="(item, index) in checkList" :key="index">
						<view class="row">
							<view class="title1">{{ index + 1 }}</view>
							<vies class="label-index">{{ item.name }}</vies>
							<view class="annotation" v-if="item.isAnnotation" @click="annotationShow(index)">批注详情</view>
						</view>
						<view v-if="isActive === index">
							<textarea v-model="value" height="100" placeholder="请输入" class="text-area"></textarea>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查照片 -->
			<view class="item">
				<view class="top-label" @click="retract(5)">
					<view class="">检查照片</view>
					<view v-if="showBasicInformation[5].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[5].show">
					<view class="img-all">
						<view v-for="(item, index) in imgList" :key="index" @click="onPreviewImage(item, index)">
							<image :src="item.url" class="file-img"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查记录单 -->
			<view class="item">
				<view class="top-label">
					<view class="requireStar">检查记录单</view>
					<view class="zi-label">{{ imgList.length }}/3</view>
				</view>
				<view class="info" style="display: flex">
					<view style="display: flex">
						<view v-for="(image, index) in imgList" :key="index" style="position: relative">
							<image :src="image.url" class="file-img" @click="onPreviewImage(image, index)"></image>
							<image src="../../static/image/deletImg.png" class="delet-img" @click="delect()"></image>
						</view>
						<view @click="up" v-if="imgList && imgList.length < 3">
							<image src="../../static/image/upload.png" class="file-img"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查情况补充 -->
			<view class="item">
				<view class="top-label">
					<view>检查情况补充</view>
				</view>
				<view class="info">日常晨检: 消毒-餐具、厨具消毒: 食品添加剂使用贮存</view>
			</view>
			<!-- 是否需要整改 -->
			<view class="item">
				<view class="top-label">
					<view>是否需要整改</view>
					<view>是</view>
				</view>
				<view class="zheng-gai-zi" style="margin-left: 10rpx">整改意见：</view>
				<view class="content-item" style="margin-left: 10rpx">以上检查出的1项问题由长春市教育局负责督促整改验收，学校于2024-01-23 前完成整改并上报。</view>
			</view>
			<!-- 检查人签名 -->
			<view class="item" style="margin-bottom: 200rpx">
				<view class="top-label">
					<view class="">检查人签名</view>
					<view>签名</view>
				</view>
			</view>
		</view>
		<view class="check-bottom-box" @click.stop>
			<button class="sure-button" @click.stop="submit()">确认</button>
		</view>
		<!-- 上传图片弹层 -->
		<uv-popup ref="popup" @change="change" :closeable="true">
			<view class="popup-title-1">上传方式</view>
			<view class="up-popup-content">
				<view class="select-one" @click="chooseImage">从相册选择</view>
				<view class="select-two" @click="chooseImageCamera">照片上传</view>
				<view class="bottom-box" @click.stop>
					<view @click.stop="popupSubmit()">取消</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const showBasicInformation = reactive([{ show: true }, { show: true }, { show: true }, { show: true }, { show: true }, { show: true }]);
const value = ref('这里是一段文字主要描述食材平台采购情况的详细信息');
function retract(index) {
	showBasicInformation[index].show = !showBasicInformation[index].show;
}
const form = ref({
	schoolName: '长春第一实验幼儿园',
	headmasterName: '去过问',
	schoolNature: '公办',
	feedingMode: '自有食堂',
	cafeteriaName: '长春市第一幼儿园食堂',
	canteenPerson: '张哈哈'
});
const list = ref([
	{ name: '哈哈哈', sex: '0', date: '2025-03-20', img: '/static/image/index/login.jpg' },
	{ name: '哈哈哈', sex: '0', date: '2025-03-20', img: '/static/image/index/login.jpg' },
	{ name: '哈哈哈', sex: '0', date: '2025-03-20', img: '/static/image/index/login.jpg' }
]);
// 检查内容列表
const checkList = [
	{ name: '燃气燃油', isAnnotation: false },
	{ name: '燃气燃油', isAnnotation: false },
	{ name: '燃气燃油', isAnnotation: true }
];
const isActive = ref(-1);
function annotationShow(index) {
	if (isActive.value === index) {
		isActive.value = -1;
	} else {
		isActive.value = index;
	}
}
const imgList = ref([
	{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' },
	{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }
	// { url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' },
]);
function submit() {
	if (imgList.value && imgList.value.length > 0) {
		uni.showToast({
			icon: 'success',
			duration: 2000,
			title: '添加成功'
		});
		uni.navigateTo({
			url: '/packageDailyCheck/pages/index'
		});
	} else {
		uni.showToast({
			icon: 'none',
			duration: 2000,
			title: '请上传检查记录单'
		});
	}
}
// 图片预览
let onPreviewImage = (item, index) => {
	let photoList = fileList.value.map((item) => {
		return item.url;
	});
	uni.previewImage({
		// 先filter找出为图片的item，再返回filter结果中的图片url
		urls: photoList,
		current: index
	});
};
let popup = ref();
//显示弹层
function up() {
	popup.value.open('bottom');
}
// 关闭弹层
function popupSubmit() {
	popup.value.close();
}
// 相册选择上传
function chooseImage() {
	uni.chooseImage({
		count: 30, // 图片数量
		sizeType: ['original', 'compressed'],
		sourceType: ['album'],
		success: (res) => {
			fileList.value.push(res.tempFilePaths);
		},
		fail: (err) => {
			console.log('选择图片失败', err);
		}
	});
}
// 拍照上传
function chooseImageCamera() {
	uni.chooseImage({
		count: 3,
		sizeType: ['original', 'compressed'],
		sourceType: ['camera'],
		success: (res) => {
			fileList.value.push(res.tempFilePaths);
		},
		fail: (err) => {
			console.log('选择图片失败', err);
		}
	});
}
// 图片删除
function delect() {}
</script>

<style lang="scss" scoped>
@import '@/static/css/dailycheck/viewIndex.scss';
@import '@/static/css/dailycheck/common.scss';
.list-container {
	margin-top: 20rpx;
}
::v-deep .placeholder-color {
	color: rgba(0, 0, 0, 0.3);
	font-size: 32rpx;
}
::v-deep .requireStar {
	width: 30%;
}
::v-deep .requireStar:after {
	vertical-align: bottom; //加上星号会上下居中，不加会在上角展示
	content: ' *';
	color: rgba(255, 59, 48, 1);
	font-size: 100%;
}
.zi-label {
	color: #9e9e9e;
	font-size: 24rpx;
}
.file-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 4px;
	margin-left: 10rpx;
}
.popup-title-1 {
	height: 112rpx;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #e7e7e7;
	line-height: 112rpx;
	background: #ffffff;
}
.up-popup-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 360rpx;
	background: #f5f5f5;
	.select-one {
		height: 110rpx;
		background: #ffffff;
		margin-top: -140rpx;
		text-align: center;
		border-bottom: 1px solid #e7e7e7;
		line-height: 110rpx;
	}
	.select-two {
		height: 110rpx;
		line-height: 110rpx;
		background: #ffffff;
		text-align: center;
		border-bottom: 1px solid #e7e7e7;
	}
	.bottom-box {
		height: 110rpx;
		line-height: 110rpx;
		background: #ffffff;
		text-align: center;
	}
}
.delet-img {
	height: 32rpx;
	width: 32rpx;
	position: absolute;
	right: 0;
	top: 0;
}
</style>
